<template>
  <el-dialog v-model="dialogVisible" class="preview-box" width="30%">
    <img w-full :src="dialogImageUrl" class="previewImg" />
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';

const dialogVisible = ref(false);
const dialogImageUrl = ref('');

// 打开
const open = (url = '') => {
  dialogVisible.value = true;
  dialogImageUrl.value = url;
};
// 关闭
const close = () => {
  dialogVisible.value = false;
  dialogImageUrl.value = '';
};

// 组件实例
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.preview-box {
  overflow: auto;

  :deep() {
    .el-dialog__body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
  }

  .previewImg {
    width: 100%;
    object-fit: fill;
  }
}
</style>
